<template>
  <div>
    <div class="header-nav ">
      <div class="content xui-fc">
        <div class="logo-wrap xui-fl">
          <img src="@/assets/images/home/logo.png" alt="">
        </div>
        <div class="xui-fr">
          <ul class="nav-list xui-fc xui-fl ">
            <li v-if="isRoutesAdded  && item.title && item.name !=='userCenter'" v-for="(item,index) in SiteMap" :key="index">
              <router-link :to="{name: item.name}">{{item.title}}</router-link>
              <!-- <a :href="item.href">{{item.title}}</a> -->
              <ul class="header-nav-child">
                <li class="" v-if="!child.hide" v-for="(child,index) in item.children" :key="index">
                  <p>
                    <router-link :to="{name: child.name}" v-if="!child.hide">{{child.title}}</router-link>
                  </p>
                </li>
              </ul>
              <div class="header-nav-child-bg"></div>
            </li>
          </ul>
          <div class="xui-fl color-white xui-margin-right-xl xui-margin-top lang-wrap">
            |
            <a href="javascript:void(0);" @click="toChinese" class="color-white">中文</a>
            <a href="javascript:void(0);" @click="toEnglish" class="color-white">ENG</a> |
          </div>
          <!-- <a href="" class="xui-fl color-white xui-margin-right-lg" style="margin-top:15px">
            <i class="iconfont icon-user  xui-font-size-xl"></i>
          </a> -->

          <div class="xui-fl" v-if="!isEnglish">
            <div v-if="!isLoging" class="color-white xui-margin-right-lg xui-margin-top xui-fl" style="diplay:inline-block">
              <span class="login-link" @click="showLogin" style="cursor:pointer">登录</span>
              <router-link class=" color-white" :to="'/register'">注册</router-link>
            </div>
            <!-- <router-link v-else class="color-white xui-margin-right-lg xui-fl" :to="'/userCenter'" >
              <i class="iconfont icon-user" ></i>
            </router-link> -->
            <span v-else style="margin-top:17px;" class="color-white xui-margin-right-lg xui-fl">
              <router-link class="xui-margin-left-sm" :to="'/userCenter'">
                <i class="iconfont icon-user color-white" style="font-size:20px;"></i>
              </router-link>
              <span class="xui-margin-left-xs logout-btn" @click="logOut" style="position:relative;top:-2px">退出</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!--登录框-->
    <login-dialog></login-dialog>

    <!-- 提示需要登录的对话框 -->
    <need-login-dialog></need-login-dialog>
  </div>
</template>
<script>
  import LoginDialog from "./loginDialog";
  import needLoginDialog from "./needLoginDialog.vue";
  import {
    getLang
  } from "@/utils/lang";
  export default {
    components: {
      LoginDialog,
      needLoginDialog
    },
    computed: {
      SiteMap() {
        return this.$store.getters.siteMap;
      },
      isRoutesAdded() {
        return this.$store.state.router.isRemoteRoutesAdded;
      },
      isLoging() {
        return Boolean(this.$store.getters.userId);
      },
      isEnglish() {
        return getLang() == "en";
      }
    },
    methods: {
      showLogin() {
        this.$store.dispatch("ToggleLoginDialog", true);
      },
      toChinese() {
        this.$store.dispatch("toChinese");
        window.location.href = "/";
      },
      toEnglish() {
        // this.$alert(
        //   "英文网站正在建设中。English website is building now.",
        //   "提示 Info",
        //   {
        //     confirmButtonText: "确定"
        //   }
        // );

        // 切换到英文网站
        this.$store.dispatch("toEnglish");
        window.location.href = "/";
      },
      logOut() {
        this.$confirm("是否退出登录?", "退出", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.$store.dispatch("LogOut");
            this.$router.push({
              name: "home"
            });
          })
          .catch(() => {});
      }
    }
  };

</script>

<style lang="less" scoped>
  @import url(../../assets/css/config.less);

  .header-nav {
    background-color: rgba(25, 25, 25, 0.6);
    height: 64px;
    width: 100%;
    min-width: 1200px;
    position: absolute;
    z-index: 2500;

    .lang-wrap {
      a:visited {
        color: #fff;
      }

      a:focus {
        color: #fff;
      }
    }

    .logout-btn {
      cursor: pointer;
    }

    .login-link {
      cursor: pointer;
    }

    .login-link:hover,
    .logout-btn:hover {
      color: @color-primary;
    }

    .content {
      width: 100%;
      height: 64px;
      margin: 0 auto;

      .logo-wrap {
        margin: 10px 0px 0 20px;
      }

      .nav-list {
        margin-right: 30px;

        .header-nav-child-bg {
          position: absolute;
          top: 64px;
          left: 0;
          height: 0;
          opacity: 0;
          width: 100%;
          z-index: 10;
          background: url("../../assets/images/header-nav-child-bg.png");
          transition: height 0.2s;
        }

        >li {
          display: inline-block;
          height: 100%;
          line-height: 48px;

          >a {
            height: 64px;
            line-height: 64px;
            color: #fff;
            font-size: 16px;
            display: block;
            padding: 0 20px;
            cursor: pointer;
          }

          >a:hover {
            color: @color-primary;
          }

          .router-link-active {
            color: #bf9c51;
          }
        }

        >li:hover {
          background: url("../../assets/images/header-nav-child-arrow.png") no-repeat center bottom;

          >a {
            color: @color-primary;
          }
        }

        >li:hover .header-nav-child {
          display: block;
          opacity: 1;
          white-space: nowrap;
        }

        >li:hover .header-nav-child-bg {
          height: 50px;
          opacity: 1;
        }

        >li:first-child:hover {
          background-image: none;
        }

        >li:first-child:hover .header-nav-child-bg {
          height: 0;
        }

        >li:last-child {
          .header-nav-child {
            margin-left: -100px;
          }
        }

        .header-nav-child {
          display: none;
          opacity: 0;
          transition: opacity 0.3s;
          position: absolute;
          transform: translateX(-50%);
          margin-left: 40px;
          z-index: 11;

          >li {
            display: inline-block;
            padding: 0 17px 0 14px;
            background: url("../../assets/images/nav-child-list-dot.png") no-repeat right center;

            p {
              a {
                color: #fff;
                font-size: 14px;
              }

              a:hover {
                color: @color-primary;
              }
            }
          }

          li:last-child {
            background-image: none;
          }
        }
      }

      a:hover {
        color: @color-primary;
      }
    }
  }

  @media screen and (max-width: 1440px) {
    .header-nav .content .nav-list>li>a {
      font-size: 14px;
    }
  }

</style>
